<template>
    <div class="buy-spress-integral">
        <div class="goods-detail" v-for='(item,index) in content' :key="index" @click="toProductDetail(item.goods.id, item.goods['norms_id'], item.goods.stock)">
            <div class="detail-head">
                <img :src="item['image_url']" alt="">
                <div class="sale-message">
                    <div class="sales-num">
                        <span>销量{{item['sales_volume']}}</span>
                    </div>
                    <div class="sale-rate">
                        <span>{{item.goods['discount']}}折</span>
                    </div>
                </div>
                <div class="goods-empty-layer" v-if="item.goods.stock == 0">
                    <div class="empty-label">
                        <span>已抢光</span>
                    </div>
                </div>
            </div>
            <div class="detail-name">
                <span>{{item.name}}</span>
                <span>{{item.content}}</span>
            </div>
            <div class="detail-price">
                <div class="now-price">
                    <span>￥</span>
                    <span>{{item.goods.price}}</span>
                </div>
                <div class="old-price">
                    <span>￥{{item.goods['prime_cost']}}</span>
                </div>
                <div class="user-integral">
                    <span>{{item.integral}}积分</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'buySpress',
    props:['content'],
    methods:{
        toProductDetail(id, status, stock){
            this.$router.push({path:'/product', query:{id:id}});
            sessionStorage.setItem('status', JSON.stringify(status));
            sessionStorage.setItem('stock', stock);
        }
    },
    mounted(){
        this.transferUrl(this.content);
    }
}
</script>

<style lang='less'>
@rem:100rem;

.buy-spress-integral{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .goods-detail{
        width: 242/@rem;
        height: 380/@rem;
        margin: 0 3/@rem;
        background: #fff;
        margin-top: 6/@rem;
        .detail-head{
            width: 100%;
            height: 238/@rem;
            position: relative;
            overflow: hidden;
            img{
                width: 242/@rem;
                height: 238/@rem;
            }
            .sale-message{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                .sales-num{
                    min-width: 96/@rem;
                    padding: 0 8/@rem;
                    height: 42/@rem;
                    background: rgba(0, 0, 0, 0.6);
                    line-height: 42/@rem;
                    text-align: center;
                    span{
                        font-size: 22/@rem;
                        color: #fff;
                    }
                }
                .sale-rate{
                    height: 42/@rem;
                    min-width: 80/@rem;
                    padding: 0 8/@rem;
                    background: rgba(209,0,22,0.8);
                    line-height: 42/@rem;
                    text-align: center;
                    span{
                        font-size: 22/@rem;
                        color: #fff;
                    }
                }
            }
            .goods-empty-layer{
                width: 150%;
                height: 150%;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                left: 0;
                top: 0;
                background: rgba(0,0,0,0.7);
                transform: rotate(-36deg) translateX(-10/@rem) translateY(-80/@rem);
                .empty-label{
                    width: 142/@rem;
                    height: 52/@rem;
                    border: 2/@rem solid #fff;
                    line-height: 48/@rem;
                    span{
                        color: #fff;
                    }
                }
            }
        }
        .detail-name{
            width: 100%;
            box-sizing: border-box;
            padding: 0 10/@rem;
            font-size: 26/@rem;
            margin-top: 16/@rem;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            text-align: start;
        }
        .detail-price{
            width: 100%;
            padding: 0 6/@rem;
            display: flex;
            justify-content: flex-start;
            margin-top: 10/@rem;
            .now-price{
                color: #ff2b48;
                font-size: 24/@rem;
                display: flex;
                align-items: flex-end;
                span:nth-of-type(1){
                    font-size: 14/@rem;
                }
            }
            .old-price{
                font-size: 16/@rem;
                color: #5b5b5b;
                display: flex;
                align-items: flex-end;
                span{
                    text-decoration: line-through;
                    margin-left: 14/@rem;
                }
            }
            .user-integral{
                color: #5b5b5b;
                display: flex;
                align-items: flex-end;
                margin-left: 6/@rem;
                span{
                    font-size: 18/@rem;
                }
            }
        }
    }
}

</style>
